<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/header :: common_header(~{::title}, ~{}, ~{::script})">
    <title>角色管理</title>
    <!-- My JavaScript -->
    <script src="../../static/app/sys/rolelist.js" th:src="@{/app/sys/rolelist.js}"></script>
</head>

<body class="easyui-layout" data-options="fit:true" style="margin:2px;">

<div data-options="region:'north',title:'角色查询',hideCollapsedContent:false,height:'auto'"
     style="padding:5px 0;">
    <form id="searchForm" method="POST" class="search-form">
        <div class="form-item">
            <label class="label-top">名称：
                <input id="sf_name" name="name" class="easyui-textbox"/>
            </label>
        </div>
        <div class="form-item">
            <a href="javascript:;" id="searchBtn" class="easyui-linkbutton primary" iconCls="e-icon fa fa-search">查询</a>
            <a href="javascript:;" id="resetBtn" class="easyui-linkbutton" iconCls="e-icon fa fa-repeat">重置</a>
        </div>
    </form>
</div>
<div data-options="region:'center'">
    <table id="roleGrid" data-options="toolbar:'#roleGrid-toolbar',border:false"></table>
</div>
<div data-options="region:'east',border:false,split:true" style="width: 280px;">
    <div id="roleRelatedLayout" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'关联用户',border:false,collapsible:false,split:true" style="height:200px">
            <table id="roleUserGrid" class="easyui-datagrid"
                   data-options="fit:true,fitColumns:true,pagination:false,border:false">
                <thead>
                <tr>
                    <th data-options="field:'username',width:100">用户名称</th>
                    <th data-options="field:'nickName',width:100">用户昵称</th>
                </tr>
                </thead>
            </table>
        </div>
        <div data-options="region:'center',title:'关联权限',border:false">
            <ul id="roleAclTree" class="easyui-tree"></ul>
        </div>
    </div>
</div>

<!-- toolbar -->
<div id="roleGrid-toolbar" style="padding:5px;"><!-- 上 右 下 左  -->
    <a href="javascript:;" class="easyui-linkbutton" plain="true" permission="sys:role:add"
       iconCls="fa fa-plus" onclick="add()">添加</a>
    <a href="javascript:;" class="easyui-linkbutton" plain="true" permission="sys:role:del"
       iconCls="fa fa-trash" onclick="deletes()">删除</a>
</div>

<div id="dlg" class="easyui-dialog" data-options="title:'',width:650,height:380,closed:true">
    <form id="fm" class="dlg-form" method="POST">
        <input id="fm_id" name="id" type="hidden"/>
        <fieldset>
            <legend>角色信息</legend>
            <div class="form-item">
                <label class="label-top">角色名称：</label>
                <input id="fm_name" name="name" class="easyui-validatebox easyui-textbox" prompt="请输入名称"
                       data-options="required:true,validType:'byteLength[2,20]'">
            </div>
            <div class="form-item">
                <label class="label-top">角色英文名：</label>
                <select id="fm_enname" name="enname" class="easyui-validatebox easyui-textbox" prompt="请输入英文名称"
                        data-options="required:true">
                </select>
            </div>
            <div class="form-item" style="width:100%;">
                <label class="label-top">备注：</label>
                <input id="fm_note" name="note" class="easyui-validatebox easyui-textbox"
                       data-options="height:60,multiline:true" style="width: 460px;"/>
            </div>
        </fieldset>
    </form>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- My JavaScript -->

</body>
</html>
